<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth起步"></meta>
    <title>创建地球-背景透明</title>

    <!-- 强制提前加载Cesium.js，其中Cesium相关路径可以换成自定义的 -->
    <!-- <script src="../../XbsjCesium/Cesium.js"></script> -->
    <!-- <link rel="stylesheet" href="../../XbsjCesium/Widgets/Widgets.css"> -->

    <!-- 0 引入js文件 -->
    <!-- <script src="../../XbsjEarth/XbsjEarth.js"></script> -->
    <!-- <script src="http://earthsdk.com/v/last/XbsjEarth/XbsjEarth.js"></script> -->
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <div id="earthContainer" style="width: 100%; height: 100%; background-image: url(http://cesiumlab.com/static/img/bg.1b3c462.png);">
    </div>
    <script>
        var earth;
        var bgImagery;

        function startup() {
            // earth = new XE.Earth('earthContainer');
            earth = new XE.Earth('earthContainer', {
                // 这里设置Viewer的配置，和new Viewer(container, options)中的options一致
                //homeButton: true,
                //timeline: true,
				orderIndependentTranslucency: false,
				contextOptions: {
					webgl: {
						alpha: true,
					}
				},
            });

			const viewer = earth.czm.viewer;

		    viewer.scene.skyBox.show = false;
		    viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);

            earth.sceneTree.root = {
                "children": [
                    {
                        "czmObject": {
                            "name": "默认离线影像",
                            "xbsjType": "Imagery",
                            "xbsjImageryProvider": {
                                "createTileMapServiceImageryProvider": {
                                    "url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
                                    "fileExtension": 'jpg',
                                },
                                "type": "createTileMapServiceImageryProvider"
                            }
                        }
                    },
                ]
            };
        }

        // 1 XE.ready()会加载Cesium.js等其他资源，注意ready()返回一个Promise对象。
        XE.ready().then(startup);            
    </script>
</body>

</html>